<template>
	<view class="merchants">
		<view class="box">
			<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/ipEopFLvUa_reproduction_icon.png" mode=""></image>
			<view class="slip-title">
				<view class="img">
					<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/fBjLgFYEgh_goto_icon_white.png" mode="" @click="previous"></image>
				</view>
				<view class="txt">商户奖励</view>
			</view>
			<view class="activity_rules" @click="QSPopup=true">活动规则</view>
			<view class="big_box">
				<view class="ld-record-tabs">
					<view :class="changeTab=='CONSUME_POINT'?'active':''" class="transfer" @click="changetabs('CONSUME_POINT')">消费奖励金</view>
					<view :class="changeTab=='REWARD_POINT'?'active':''" class="reception" @click="changetabs('REWARD_POINT')">幸运奖励</view>
				</view>
				<view class="trading_box my-pdlr-15 my-mgt-15">
					<view style="height: 70rpx;"></view>
					<view class="trading_box_li">
						<view class="li_tlt">
							<view class="rai_bg"></view>
							<view class="li_tlt_name">平台实时总交易量</view>
							<view class="rai_bg"></view>
						</view>
						<view class="li_num">￥{{platformTransfer.totalAmount||0}}</view>
						<view class="zhogjaing_box">
							<view class="txt">上期中奖编号为</view>
							<view class="num my-mgt-10">{{platformTransfer.positionNo||0}}</view>
						</view>
						<view class="pro_box my-pdlr-15">
							<view class="pro_box_txt">下期开奖进度</view>
							<view class="pro_li_contant">
								<view class="item_li">
									<u-line-progress :percent="platformTransfer.per | percentFormat" show-percent="false" striped="true"
										striped-active="true" active-color="#fb672d"></u-line-progress>
								</view>
								<image style="width: 38rpx;height: 38rpx;" src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/WliNDblmTa_gold_icon.png"
									mode=""></image>
								<text class="col my-mgl-10">{{platformTransfer.per | percentFormat}}%</text>
							</view>
						</view>
					</view>
					<view class="points_box my-mgt-10">
						<view class="tlt_box my-mgt-10 my-mgl-10">
							<view class="points_txt">平台{{changeTabLabel}}奖励金</view>
						</view>
						<view class="cont_name my-pdl-10">
							<text class="my-mgr-50">已开奖{{points.openStage||0}}期</text>
							<text class="my-mgl-40">已兑换{{points.exchangStage||0}}期</text>
						</view>
						<view class="cont_name my-pdl-10">
							<text class="my-mgr-30"><text class="my-mgr-15">消费奖励金</text><text style="color:#FF532B;">{{points.consumPoints||0}}</text><text>奖励金</text></text>
							<text><text class="my-mgr-15">幸运奖励</text><text style="color:#FF532B;">{{points.rewardPoints||0}}</text><text>奖励金</text></text>
						</view>
					</view>
					<view class="points_box status_box my-mgt-10">
						<view class="tlt_box my-mgt-10 my-mgl-10">
							<view class="points_txt">最新动态</view>
						</view>
						<scroll-view scroll-y="true" class="status_box_scroll">
							<template v-if="newStatus.length > 0">
								<view class="tab_list my-pdlr-10" v-for="(item,index) in newStatus" :key="item.stage">
									<text class="my-mgr-10">第{{item.stage}}期</text>
									<text class="my-mgr-10">{{item.nickname.length>3?(item.nickname.substr(0,3)+'****'+item.nickname.substr(7)):(item.nickname.substr(0,1)+'*'+item.nickname.substr(2))}}</text>
									<text class="my-mgr-10">{{item.updateDate}}</text>
									<text>获得{{item.points}}{{changeTabLabel}}奖励金</text>
								</view>
							</template>
							<view style="width: 100%;height: 50rpx;line-height: 50rpx;text-align: center;" v-else>暂无数据</view>
						</scroll-view>
					</view>
					<view class="trading_box_li_two my-mgt-25">
						<view class="li_tlt">
							<view class="rai_bg"></view>
							<view class="li_tlt_name">我的实时交易</view>
							<view class="rai_bg"></view>
						</view>
						<view class="li_num">￥{{mineTransfer.totalAmount||0}}</view>
						<view class="pro_box my-pdlr-15">
							<view class="pro_box_txt">获取下个抽奖号进度</view>
							<view class="pro_li_contant">
								<view class="item_li">
									<u-line-progress :percent="mineTransfer.per | percentFormat" show-percent="false" striped="true"
										striped-active="true" active-color="#fb672d"></u-line-progress>
								</view>
								<image style="width: 38rpx;height: 38rpx;" src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/WliNDblmTa_gold_icon.png"
									mode=""></image>
								<text class="col my-mgl-10">{{mineTransfer.per | percentFormat}}%</text>
							</view>
						</view>
						<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/ZuqxxHQLwk_center_gold.png" class="gload_li_img" mode=""></image>
					</view>
				</view>
				<view class="my_poinst_box my-mgt-25">
					<image class="img" src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/ZiHWCqjBLv_link_ring.png" mode=""></image>
					<view class="li_tlt my-mgt-20">
						<view class="rai_bg"></view>
						<view class="li_tlt_name">我的{{changeTabLabel}}奖励金抽奖中</view>
						<view class="rai_bg"></view>
					</view>
					
					<view class="table_box my-mgt-26">
						<view class="th">
							<view class="th_li">抽奖号</view>
							<view class="th_li">幸运奖励</view>
							<view class="th_li">状态</view>
							<view class="th_li">领取时间</view>
						</view>
						<scroll-view scroll-y="true" class="scroll_position">
							<template v-if="rewardPositionIng.list.length > 0">
								<view class="td"  v-for="(item,index) in rewardPositionIng.list" :key="item.id">
									<view class="td_li">{{item.id}}</view>
									<view class="td_li">{{item.rewardPoints}}</view>
									<template>
										<view class="btn_li" @click="receive(item.id)" v-if="item.positionStatus==='待领取'">{{item.positionStatus}}</view>
										<view class="td_li" v-else>{{item.positionStatus}}</view>
									</template>
									<template>
									<view class="td_li" v-if="item.positionStatus!='排位成功'">--</view>
									<view class="td_li" v-else>{{item.date}}</view>
									</template>
								</view>
							</template>
							<view style="width: 100%;height: 300rpx;line-height: 300rpx;text-align: center;" v-else>暂无数据</view>
						</scroll-view>
						<!-- <view class="moll_box my-mgt-10" @click="getPositionIng()">
							<text class="my-mgr-8">查看更多</text><image style="width: 25rpx;height: 25rpx;" src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/CuJEctAIBo_dropdown.png" mode=""></image>
						</view> -->
						<view class="moll_box my-mgt-10" >
							<text class="my-mgr-8">上划更多</text>
						</view>
					</view>
					
					<view class="li_tlt my-mgt-25">
						<view class="rai_bg"></view>
						<view class="li_tlt_name">我的{{changeTabLabel}}奖励金已中奖</view>
						<view class="rai_bg"></view>
					</view>
					<view class="table_box my-mgt-26">
						<view class="th">
							<view class="th_li my-mgr-20">抽奖号</view>
							<view class="th_li my-mgr-20">幸运奖励</view>
							<view class="th_li">领取时间</view>
						</view>
						<scroll-view scroll-y="true" class="scroll_position">
							<template v-if="rewardPositionSuccess.list.length > 0">
								<view class="td"  v-for="(item,index) in rewardPositionSuccess.list" :key="item.id">
									<view class="td_li my-mgr-20">{{item.id}}</view>
									<view class="td_li my-mgr-20">{{item.rewardPoints}}</view>
									<view class="td_li">{{item.date=== null?'--':item.date.slice(0,10)}}</view>
								</view>
							</template>
							<view style="width: 100%;height: 300rpx;line-height: 300rpx;text-align: center;" v-else>暂无数据</view>
						</scroll-view>
						<!-- <view class="moll_box my-mgt-10" @click="getPositionSuccess()">
							<text class="my-mgr-8">查看更多</text><image style="width: 25rpx;height: 25rpx;" src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/CuJEctAIBo_dropdown.png" mode=""></image>
						</view> -->
						<view class="moll_box my-mgt-10" >
							<text class="my-mgr-8">上划更多</text>
						</view>
					</view>
				</view>
				<view class="qualifying_box my-mgt-25">
					<image class="img" src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/ZiHWCqjBLv_link_ring.png" mode=""></image>
					<view class="li_tlt my-mgt-25">
						<view class="rai_bg"></view>
						<view class="li_tlt_name">{{changeTabLabel}}积分排行榜</view>
						<view class="rai_bg"></view>
					</view>
					<template v-if="rewardRank.list.length > 0">
						<view class="ranking-data" v-for="(item,index) in rewardRank.list" :key="index">
							<view class="img_box">
								<image :src="icon1"v-if="index==0" class="img_item"></image>
								<image :src="icon2"v-else-if="index==1" class="img_item"></image>
								<image :src="icon3"v-else-if="index==2" class="img_item"></image>
								<view class="ranking-index my-pdl-10" v-else>{{index+1}}</view>
							</view>
							<view class="ranking-data-img">
								<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/JNIWcftcwD_logo_icon.jpg"></image>
								<view class="ranking-data-name">{{item.nickname}}</view>
							</view>
							<view class="ranking-data-num">
								<image style="width: 38rpx;height: 38rpx;" src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/apzaOnTVSd_gold_icon.png" mode=""></image>
								<text class="my-mgl-10">{{item.rewardPoints}}</text>
							</view>
						</view>
					</template>
					<view style="width: 100%;height: 500rpx;line-height: 500rpx;text-align: center;" v-else>暂无数据</view>
				</view>
				<view style="width: 100%;height: 190rpx;">
					<image style="width: 100%;height: 100%;" class="bottom_item" src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/ySBWxrhoJS_bottom_gold.png" mode=""></image>
				</view>
			</view>
		</view>
		<u-popup v-model="QSPopup" mode="center" border-radius="10">
			<view class="tanchu_model">
				<view class="tanchu_model_txt">商户全民奖励</view>
				<view class="contant_box">
					<view class="contant_box_th my-pdlr-15">消费奖励金抽奖</view>
					<view class="contant_box_li my-pdlr-15">
						交易金抽奖：商户每累计交易1万，平台分配一个抽奖号，当平台交易每新增20万，抽奖一次，中奖的商户获得60奖励金
					</view>
					
					<!-- <view class="contant_box_th my-pdlr-15 my-mgt-10">幸运奖励抽奖</view>
					<view class="contant_box_li my-pdlr-15">
						商户每累计交易1万,平台分配一个抽奖号,当平台交易每新增100万,抽奖一次,中奖的商户获得100奖励金,可到商城兑换热门好物。
					</view> -->
				</view>
				<view class="my-mgt-15" style="width: 560rpx;height: 100rpx;margin: auto;color: #FFFFFF;">
					<text class="">*平台所有交易统计包含贷记卡交易+扫码交</text>
					<text class="my-pdl-5">易，不包含储蓄卡交易</text>
				</view>
			</view>
		</u-popup>
		
		<u-popup v-model="rules" mode="center" border-radius="18">
			<view class="jingbao_model">
				<view class="jingbao_model_tlt">劲爆消息</view>
				<view class="jingbao_model_txt">商户奖励-消费奖励金政策升级</view>
				<view class="contant_box">
					<view class="contant_box_th my-pdlr-15">消费奖励金抽奖</view>
					<view class="contant_box_li my-pdlr-15">
						商户每累计交易1万,平台分配一个抽奖号,当平台交易每新增30万,抽奖一次,中奖的商户获得60奖励金,可到商城兑换热门好物。
					</view>
					
					<view class="contant_box_th my-pdlr-15 my-mgt-10">幸运奖励抽奖</view>
					<view class="contant_box_li my-pdlr-15">
						商户每累计交易1万,平台分配一个抽奖号,当平台交易每新增100万,抽奖一次,中奖的商户获得100奖励金,可到商城兑换热门好物。
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {rewardMineTransferApi, rewardPointsApi, rewardNewStatusApi, rewardPlatformTransferApi, rewardRankApi, rewardPositionApi ,getReceiveApi} from "@/api/home.js"
	export default {
		data() {
			return {
				changeTab: 'CONSUME_POINT', //CONSUME_POINT 消费积分, REWARD_POINT 奖励积分
				changeTabLabel: '消费',
				icon1:'https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/nhkvvCKmgq_NO_1.png',
				icon2:'https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/bKturvGuik_NO_2.png',
				icon3:'https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/vLTGKDooDl_NO_3.png',
				QSPopup:false,
				rules:false,
				/* 我的实时交易量 */
				mineTransfer: {
					per: 0,
					positionNo: 0,
					totalAmount: 0,
				},
				/* 平台积分 */
				points: {
					consumPoints: 0,
					exchangStage: 0,
					openStage: 0,
					rewardPoints: 0
				},
				newStatus: [],
				/* 总交易量*/
				platformTransfer: {
					per: 0,
					positionNo: 0,
					totalAmount: 0,
				},
				rewardPositionIng: {
					pageIndex: 0,
					pageSize: 1000,
					loadAll: false,
					list: []
				},
				rewardPositionSuccess: {
					pageIndex: 0,
					pageSize: 1000,
					loadAll: false,
					list: []
				},
				rewardRank: {
					pageIndex: 0,
					pageSize: 10,
					loadAll: false,
					list: []
				}
			};
		},
		filters: {
			percentFormat(value) {
				if(!value) {
					return 0
				}
				return parseInt(value * 100)
				
			}
		},
		created() {
			this.QSPopup = true
			this.loadPage()
		},
		methods: {
			loadPage(){
				this.getreward()
				this.getPlatformPoints()
				this.getNewStatus()
				this.getPlatformTransfer()
				this.getPositionIng()
				this.getPositionSuccess()
				this.getRewardRank()
			},
			async getreward(){
				let params = {
					rewardType:this.changeTab
				}
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await rewardMineTransferApi(params)
				if(res.statusCode === 200){
					uni.hideLoading()
					this.mineTransfer = res.data.data
				}
			},
			// 待领取
			async receive(id){
				let _this = this
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await getReceiveApi(id)
				if(res.statusCode === 200){
					uni.hideLoading()
					uni.showToast({
						mask:true,
						title:"领取成功",
						icon:"success",
						success() {
							_this.rewardPositionIng.list = []
							_this.rewardPositionIng.pageIndex = 0
							_this.rewardPositionIng.loadAll = false
							setTimeout(()=>{
								_this.getPositionIng()
							},1500)
						}
					})
				}
			},
			async getPlatformPoints(){
				let params = {
					rewardType:this.changeTab
				}
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await rewardPointsApi(params)
				if(res.statusCode === 200){
					uni.hideLoading()
					this.points = res.data.data
				}
			},
			async getNewStatus(){
				let params = {
					rewardType:this.changeTab
				}
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await rewardNewStatusApi(params)
				if(res.statusCode === 200){
					uni.hideLoading()
					this.newStatus = res.data.data || []
				}
			},
			async getPlatformTransfer(){
				let params = {
					rewardType:this.changeTab
				}
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await rewardPlatformTransferApi(params)
				if(res.statusCode === 200){
					uni.hideLoading()
					this.platformTransfer = res.data.data
				}
			},
			async getPositionIng() {
				//debugger;
				// if(this.rewardPositionIng.loadAll) {
				// 	return false;
				// }
				let params = {
					rewardType:this.changeTab,
					pageIndex: this.rewardPositionIng.pageIndex,
					pageSize: this.rewardPositionIng.pageSize,
					positionStatus: null
				}
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await rewardPositionApi(params)
				if(res.statusCode === 200){
					uni.hideLoading()
					this.rewardPositionIng.list = this.rewardPositionIng.list.concat(res.data.data.rows)
					this.rewardPositionIng.pageIndex ++
					if((this.rewardPositionIng.pageIndex + 1) * this.rewardPositionIng.pageSize >= res.data.data.total) {
						this.rewardPositionIng.loadAll = true
					}
				}
			},
			async getPositionSuccess() {
				// if(this.rewardPositionSuccess.loadAll) {
				// 	return false;
				// }
				let params = {
					rewardType:this.changeTab,
					pageIndex: this.rewardPositionSuccess.pageIndex,
					pageSize: this.rewardPositionSuccess.pageSize,
					positionStatus: 'POSITION_SUCCESS'
				}
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await rewardPositionApi(params)
				if(res.statusCode === 200){
					uni.hideLoading()
					this.rewardPositionSuccess.list = this.rewardPositionSuccess.list.concat(res.data.data.rows)
					this.rewardPositionSuccess.pageIndex ++
					if((this.rewardPositionSuccess.pageIndex + 1) * this.rewardPositionSuccess.pageSize >= res.data.data.total) {
						this.rewardPositionSuccess.loadAll = true
					}
				}
			},
			async getRewardRank() {
				if(this.rewardRank.loadAll) {
					return false;
				}
				let params = {
					rewardType:this.changeTab,
					pageIndex: this.rewardRank.pageIndex,
					pageSize: this.rewardRank.pageSize
				}
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await rewardRankApi(params)
				if(res.statusCode === 200){
					uni.hideLoading()
					this.rewardRank.list = this.rewardRank.list.concat(res.data.data.rows)
				}
			},
			changetabs(item) {
				this.changeTab = item
				if(item==='CONSUME_POINT'||item==='REWARD_POINT'){
					this.rewardPositionIng.pageIndex = 0
					this.rewardPositionIng.loadAll = false
					this.rewardPositionIng.list = []
					this.rewardPositionSuccess.pageIndex = 0
					this.rewardPositionSuccess.loadAll = false
					this.rewardPositionSuccess.list = []
					this.rewardRank.pageIndex = 0
					this.rewardRank.loadAll = false
					this.rewardRank.list = []
					this.changeTabLabel = item === 'CONSUME_POINT' ? '消费' : '奖励'
					this.loadPage()
				}
			},
			// 返回上一页
			previous() {
				uni.switchTab({
					url: "/pages/main/homePages"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.merchants {
		width: 100%;

		.box {
			width: 750rpx;
			height: 6202rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.slip-title {
				width: 100%;
				height: 150rpx;
				display: flex;
				padding-top: 70rpx;
				position: absolute;
				top: 0rpx;
				left: 0rpx;

				.img {
					width: 15%;
					height: 100%;
					padding-top: 13rpx;

					image {
						width: 38rpx;
						height: 38rpx;
						padding-left: 29rpx;
					}
				}

				.txt {
					width: 70%;
					height: 100%;
					text-align: center;
					font-size: 37rpx;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
			
			.activity_rules{
				width: 148rpx;
				height: 58rpx;
				text-align: center;
				line-height: 58rpx;
				background: #FFE598;
				box-shadow: 0rpx 5rpx 12rpx 0rpx rgba(178, 143, 81, 0.31);
				border-radius: 29rpx 0rpx 0rpx 29rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #EF1F09;
				position: absolute;
				top: 170rpx;
				right: 0rpx;
			}
			.big_box {
				width: 100%;
				position: absolute;
				top: 800rpx;
				left: 0rpx;

				.ld-record-tabs {
					width: 100%;
					height: 100rpx;
					display: flex;
					justify-content: space-evenly;
					align-items: center;

					.transfer,
					.reception {
						width: 200rpx;
						height: 70rpx;
						text-align: center;
						line-height: 70rpx;
						background: linear-gradient(0deg, #FBA217 0%, #FF9F49 100%);
						border-radius: 35rpx;
						font-size: 30rpx;
						font-weight: 500;
						color: #DD1804;
					}

					.active {
						background: linear-gradient(0deg, #FFF2B7, #FFD24D);
						box-shadow: 0px 5px 16px 0px rgba(178, 143, 81, 0.31);
						color: #FF1010;
					}
				}

				.trading_box {
					width: 690rpx;
					height: auto;
					padding-bottom: 60rpx!important;
					margin: auto;
					background: #FFFFFF;
					border-radius: 20rpx;

					.trading_box_li_two {
						height: 377rpx;
					}

					.trading_box_li {
						height: 555rpx;
					}

					.trading_box_li,
					.trading_box_li_two {
						width: 100%;
						border: 2rpx solid #FFB648;
						border-radius: 20rpx;
						position: relative;

						.li_tlt {
							width: 383rpx;
							height: 51rpx;
							background: linear-gradient(0deg, #FACC22 0%, #F83600 100%);
							border-radius: 20rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							position: absolute;
							top: -20rpx;
							left: 20%;

							.li_tlt_name {
								width: 268rpx;
								height: 35rpx;
								line-height: 35rpx;
								text-align: center;
								font-size: 26rpx;
								font-weight: bold;
								color: #FFFFFF;
							}

							.rai_bg {
								width: 9rpx;
								height: 9rpx;
								background: #FFFFFF;
								border-radius: 50%;
							}
						}

						.li_num {
							width: 100%;
							height: 200rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 48rpx;
							font-weight: bold;
							color: #FF532B;
						}

						.zhogjaing_box {
							width: 100%;
							height: 160rpx;
							display: flex;
							flex-direction: column;
							align-items: center;

							.txt {
								font-size: 28rpx;
								font-weight: 500;
								color: #000000;
							}

							.num {
								font-size: 48rpx;
								font-weight: bold;
								color: #FF532B;
							}
						}

						.pro_box {
							width: 100%;
							height: 150rpx;

							.pro_box_txt {
								width: 100%;
								height: 50rpx;
								font-size: 28rpx;
								font-weight: 500;
								color: #010101;
							}

							.pro_li_contant {
								width: 100%;
								height: 100rpx;
								display: flex;
								align-items: center;

								.item_li {
									width: 450rpx;
									height: 45rpx;
								}

								.col {
									font-size: 26rpx;
									font-weight: 500;
									color: #FAB533;
								}
							}
						}
						.gload_li_img{
							width: 275.7rpx;
							height: 145rpx;
							position: absolute;
							top: -60rpx;
							right: -60rpx;
						}
					}

					.points_box {
						width: 100%;
						height: 250rpx;
						border: 2rpx solid #FFB648;
						border-radius: 20rpx;

						.tlt_box {
							width: 100%;
							height: 80rpx;

							.points_txt {
								width: 240rpx;
								height: 45rpx;
								background: #FFEDE9;
								border-radius: 20rpx;
								text-align: center;
								line-height: 45rpx;
								font-size: 30rpx;
								font-weight: 500;
								color: #000000;
							}
						}

						.cont_name {
							width: 100%;
							height: 70rpx;
							font-size: 26rpx;
							font-weight: 500;
							color: #000000;
						}
					}
					.status_box {
						.status_box_scroll {
							height: 130rpx;
							overflow-y: auto;
						}
					}
				}

				.my_poinst_box {
					width: 690rpx;
					height: 1905rpx;
					margin: auto;
					background: #FFFFFF;
					border-radius: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;

					.img {
						width: 543rpx;
						height: 201rpx;
						position: absolute;
						top: -130rpx;
						left: 85rpx;
					}

					.li_tlt {
						width: 410rpx;
						height: 51rpx;
						background: linear-gradient(0deg, #FACC22 0%, #F83600 100%);
						border-radius: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.li_tlt_name {
							width: 268rpx;
							height: 35rpx;
							line-height: 35rpx;
							text-align: center;
							font-size: 26rpx;
							font-weight: bold;
							color: #FFFFFF;
						}

						.rai_bg {
							width: 9rpx;
							height: 9rpx;
							background: #FFFFFF;
							border-radius: 50%;
						}
					}
					.table_box{
						width: 100%;
						height: 1160rpx;
						min-height:120rpx;
						margin-top: 52rpx;
						.th{
							background: #FFEDE9;
						}
						.th,.td{
							width: 100%;
							height: 64rpx;
							display: flex;
							align-items: center;
							.th_li,.td_li{
								width: 25%;
								height: 100%;
								font-weight: 400;
								text-align: center;
								line-height: 64rpx;
							}
							.btn_li{
								width: 25%;
								height: 80%;
								text-align: center;
								line-height: 50rpx;
								background: linear-gradient(0deg, #FFF2B7, #FFD24D);
								box-shadow: 0rpx 5rpx 9rpx 0rpx rgba(178, 143, 81, 0.25);
								border-radius: 26rpx;
								font-size: 28rpx;
								font-weight: 500;
								color: #FF1010;
							}
							.th_li{
								font-size: 28rpx;
								color: #000000;
							}
							.td_li{
								font-size: 22rpx;
								color: #666666;
							}
						}
						.moll_box{
							width: 100%;
							height: 60rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 30rpx;
							font-weight: 500;
							color: #FF532B;
						}
						.scroll_position {
							height: 640rpx;
							overflow-y: auto;
						}
					}
				}
				.qualifying_box{
					width: 690rpx;
					height: 1353rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					margin: auto;
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;
					.img {
						width: 543rpx;
						height: 201rpx;
						position: absolute;
						top: -130rpx;
						left: 85rpx;
					}
					.li_tlt {
						width: 360rpx;
						height: 51rpx;
						background: linear-gradient(0deg, #FACC22 0%, #F83600 100%);
						border-radius: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					
						.li_tlt_name {
							width: 268rpx;
							height: 35rpx;
							line-height: 35rpx;
							text-align: center;
							font-size: 26rpx;
							font-weight: bold;
							color: #FFFFFF;
						}
					
						.rai_bg {
							width: 9rpx;
							height: 9rpx;
							background: #FFFFFF;
							border-radius: 50%;
						}
					}
					.ranking-data{
						width: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 40rpx;
						padding-left: 30rpx;
						padding-right: 30rpx;
						.img_box{
							width: 100rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							.img_item{
								width: 58rpx;
								height: 58rpx;
							}
							.ranking-index{
								width: 58rpx;
								height: 58rpx;
								font-size: 26rpx;
								font-weight: bold;
								color: #999999;
								padding-left: 10rpx;
							}
						}
						.ranking-data-font{
							font-size: 26rpx;
							font-weight: 500;
							color: #999999;
						}
						.ranking-data-img{
							width: 55%;
							display: flex;
							justify-content: center;
							align-items: center;
							image{
								width: 72rpx;
								height: 72rpx;
								border-radius: 50%;
							}
							.ranking-data-name{
								margin-left: 20rpx;
								font-size: 26rpx;
								font-weight: 500;
								color: #333333;
							}
							
						}
						.ranking-data-num{
							width: 30%;
							height: 100%;
							text-align: right;
							font-size: 26rpx;
							font-weight: bold;
							color: #333333;
							display: flex;
							align-items: center;
						}
					}
					.bottom_item{
						width: 100%;
						height: 250rpx;
					}
				}
			}
		}
		
		.tanchu_model,.jingbao_model{
			width: 640rpx;
			height: 620rpx;
			background: linear-gradient(180deg, #EF2109 0%, #F89126 97%);
			.tanchu_model_txt{
				width: 100%;
				height: 120rpx;
				text-align: center;
				line-height: 120rpx;
				font-size: 40rpx;
				font-weight: 500;
				color: #FEFEFE;
			}
			.contant_box{
				width: 560rpx;
				height: 300rpx;
				margin: auto;
				background: #FFFFFF;
				border-radius: 20rpx;
				.contant_box_th{
					width: 100%;
					line-height: 90rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #EF250A;
				}
				.contant_box_li{
					font-size: 26rpx;
					font-weight: 500;
					color: #000000;
					line-height: 60rpx;
				}
			}
		}
		.jingbao_model{
			width: 638rpx;
			height: 791rpx;
			background-image: url(https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/kLJgBCRiMK_jingbao.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			.jingbao_model_tlt{
				width: 100%;
				line-height: 140rpx;
				text-align: center;
				font-size: 72rpx;
				font-family: MStiffHei PRC;
				font-weight: 800;
				color: #FCFA1E;
			}
			.jingbao_model_txt{
				width: 100%;
				height: 100rpx;
				text-align: center;
				font-size: 40rpx;
				font-family: FZYaoTi;
				font-weight: 400;
				color: #FCFA1E;
			}
		}
	}
</style>
